<template>
<a-row>
    <a-card hoverable id="aCard2">
        <p><b>{{$t('Data-slice')}} {{$t('Status')}}</b></p>
        <div id='slice'></div>
    </a-card>
    </a-row>
</template>
<script>
import request from '@/request/request'
import G2 from '@antv/g2'

export default {
    name:'Slice',
    data(){
        return{
            slicedata:[{
                item: this.$t('Abnormal'), // 异常
                count: 0,
                percent: 0
            }, {
                item: this.$t('Normal'), // 正常
                count: 0,
                percent: 0
            }, {
                item: this.$t('Warning'), // 警告
                count: 0,
                percent: 0
            }],
            chart:'',
            timeoutId:''
        }
    },
    computed:{
        getlanguage(){
        return this.$store.state.language
        }
    },
    watch:{  //因为是定时1份半重新绘图，所以得重新绘图之后才会生效
        getlanguage(val){  //监听语言切换，切换data组件内的多语言
            this.slicedata=[{
                    item: this.$t('Abnormal'),
                    count: 0,
                    percent: 0
                }, {
                    item: this.$t('Normal'),
                    count: 0,
                    percent: 0
                }, {
                    item: this.$t('Warning'),
                    count: 0,
                    percent: 0
            }];
            this.createNewDiv();
            this.chartdata();
		    this.drawslice();
        }
    },
    mounted(){
    	this.chartdata()
		this.drawslice()
        this.timeoutId = setInterval(this.chartdata, 90000);
        // //再初始化之后调整图表的大小自适应
        // const e = document.createEvent('Event')
        // e.initEvent('resize', true, true)
        // window.dispatchEvent(e)
    },
    destroyed(){
        clearInterval(this.timeoutId); //清除定时器
    },
    methods:{
        //创建一个新的div，用来更换语言时，重绘画布
        createNewDiv() {
            let parentNode = document.getElementById('aCard2');
            document.getElementById('slice').remove();
            let newDiv = document.createElement("div");
            newDiv.id="slice";
            parentNode.appendChild(newDiv);
        },
        drawslice(){
            this.chart = new G2.Chart({
                container:'slice',
                forceFit:true,
                height:300,
                padding: ['20', 'auto', 'auto', 'auto']
                // padding:[25, 50, 50, 40]
            });
            this.chart.source(this.slicedata,{
                percent: {
	                formatter: function formatter(val) {
	                    val = val * 100 + '%';
	                    return val;
	                }
                }
            });
            this.chart.coord('theta',{
                radius:0.75
            });
            this.chart.tooltip({
                showTitle: false,
                itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            });
            this.chart.intervalStack().position('percent').color('item',['#2EA3E6','#06BCAD','#FB3E98']).label('percent', {
                formatter: function formatter(val, item) {
                    return item.point.item + ': ' + val;
                }
            }).tooltip('item*percent', function(item, percent) {
                // percent = percent * 10 * 10==100 ? percent * 10 * 10+'%' : (percent * 10 * 10).toFixed(2) + '%';
                return {
	                name: item,
	                value: percent
                };
            }).style({
                lineWidth: 1,
                stroke: '#fff'
            });
            this.chart.render();
        },
        chartdata(){
    		request('get', 'index/status/pg').then(res=> {
                // console.log('切片状态数据', res);
                if(res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
                }else {
                    for (const slice of this.slicedata) {
                        if(slice.item == this.$t('Normal')){
                            slice.percent = res.data.normal
                        }
                        else if(slice.item == this.$t('Warning')){
                            slice.percent = res.data.unhealth
                        }
                        else if(slice.item == this.$t('Abnormal')){
                            slice.percent = res.data.down
                        }
                    }
                    this.chart.changeData(this.slicedata); //更新图表数据
                }
				// this.drawslice()
			}).catch(function (error) {
			});
    	}
    }
}
</script>

